<template>
    <div class="box4" ref="map">
        我是地图
    </div>
</template>

<script setup lang='ts' name='Map'>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import chinaJson from './china.json'

let map = ref()
// 注册中国地图
echarts.registerMap('china', chinaJson as any)

onMounted(() => {
    let mychart = echarts.init(map.value);
    /// 设置配置项目
    mychart.setOption({
        /// 地图组件
        geo: [{
            map: 'china', // 地图名称
            roam: true, // 鼠标缩放效果
            // 地图位置
            left: 50,
            right: 50,
            top: 100,
            bottom: 50,

            // 文字设置
            label: {
                show: true  // 地图文字设置

            },

            //多边形样式
            itemStyle: {
                // color: '',
                opacity: 0.8,

            }

        }],
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
        },
        series: [
            {
                type: 'lines', /// 航线系列
                data: [
                    {
                        coords: [
                            [116.46, 39.92], [121.48, 31.22]
                        ],
                        lineStyle: {
                            color: 'black',
                            width: 2,
                        }
                    },

                    {
                        coords: [
                            [116.46, 39.92], [75.634121, 36.771693]
                        ],
                        lineStyle: {
                            color: 'black',
                            width: 2,
                        }
                    }
                ],

                /// 是否显示特效
                effect: {
                    show: true,
                    symbol: 'arrow', // 特效图形
                    color: 'blue',
                    symbolSize: 10, // 特效图形大小
                }

            }
        ]
    });
})


</script>

<style scoped lang='scss'></style>